<template>
    <div class="app-container">
      <div style="background-color: #fff">
        <div class="container-module" style="padding-bottom: 0">
          <el-form :inline="true" class="search-form" size="small" ref="searchForm" :model="searchForm">
            <el-row style="display: flex">
              <div style="flex: 1">
                <el-form-item class="search-form-item" label="运营 ID">
                  <el-input style="width: 100%" v-model="searchForm.params.market_role_id" placeholder="请输入运营id">
                  </el-input>
                </el-form-item>
                <el-form-item class="search-form-item" label="用户名称">
                  <el-input style="width: 100%" v-model="searchForm.params.name" placeholder="请输入用户名称"> </el-input>
                </el-form-item>            
                <el-form-item class="search-form-item" label="手机号">
                  <el-input style="width: 100%" v-model="searchForm.params.mobile" placeholder="请输入手机号"> </el-input>
                </el-form-item>
              </div>
              <div style="padding: 5px 0">
                <el-form-item>
                  <el-button size="small" type="primary" icon="el-icon-search" @click="getList">查询</el-button>
                  <el-button size="small" type="primary" icon="el-icon-refresh" @click="resetting">重置</el-button>
                  <el-button v-if="!searchDisplay" size="small" icon="el-icon-caret-bottom"
                    @click="searchDisplay = true">展开</el-button>
                  <el-button v-else size="small" icon="el-icon-caret-top" @click="searchDisplay = false">收起</el-button>
                </el-form-item>
              </div>
            </el-row>
            <el-form-item v-if="searchDisplay" class="search-form-item" label="用户ID">
              <el-input style="width: 100%" v-model="searchForm.params.user_id" placeholder="请输入用户ID"> </el-input>
            </el-form-item>
            <el-form-item v-if="searchDisplay" class="search-form-item" label="建团时间">
              <el-date-picker @change="domeTimeWay" style="width: 100%" value-format="yyyy-MM-dd" v-model="establishTime"
                type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item v-if="searchDisplay" class="search-form-item" label="运营经理团队数据查询">
                <el-date-picker @change="operchangetime" style="width: 100%" value-format="yyyy-MM-dd" v-model="operatingtime"
                    type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
          </el-form>
        </div>
        <el-divider></el-divider>
        <div style="padding: 0 20px">
          <div class="marginBottom">
            <el-row :gutter="24">
              <el-col :span="15">
                <el-button @click="addrole()" plain icon="el-icon-circle-plus-outline" type="primary">新增岗位</el-button>
                <el-button @click="rolelist()" plain icon="el-icon-tickets" type="primary">岗位级别列表</el-button>
                <el-button @click="addManager()" plain icon="el-icon-circle-plus-outline" type="primary">新增经理</el-button>

                <el-button @click="editbasicsalary()" type="warning">配置基本工资</el-button>

  
                <el-button @click="editallocation('配置考核指标',1)" type="success">配置考核指标</el-button>
                <el-button @click="editallocation('配置奖励条件',2)" type="primary">配置优秀奖条件</el-button>
              </el-col>
              <el-col :span="6"  style="text-align:right">
                <el-button @click="butgrantincentives()" type="primary">发放考核达标奖</el-button>
                <el-button @click="butgranttalented()" type="danger">发放优秀奖</el-button>
              </el-col>
              <el-col :span="3" style="text-align:right">
                <div class="right-panel el-button-group">
                  <el-button class="" icon="el-icon-refresh" size="mini" @click="getList"></el-button>
                  <el-dropdown trigger="click" :hide-on-click="false">
                    <span class="el-dropdown-link">
                      <el-button class="" icon="el-icon-s-operation" size="mini"></el-button>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                        <el-checkbox v-model="checkboxTableThead"
                          :label="fruit">{{ tableTheadOptions[fruit].label }}</el-checkbox>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </el-col>
             
             
             
            </el-row>
          </div>
          <el-row :gutter="20">
            <el-col class="new_table_card">
              <el-table highlight-current-row :data="managerList" :header-cell-style="{
                  'background-color': '#f3f8fe',
                  color: '#606266',
                  height: '50px',
                }" style="width: 100%" v-loading="loading">
                <el-table-column v-for="fruit in tableThead" :key="fruit" :label="tableTheadOptions[fruit].label"
                  min-width="80" align="center">
                  <template slot-scope="scope">
                    <div v-if="fruit == 'region'">
                      <el-tooltip class="item" effect="dark"
                        :content="scope.row.province_name + scope.row.city_name +''" placement="top">
                        <div>
                          {{scope.row.province_name}}{{scope.row.city_name}}
                        </div>
                      </el-tooltip>
                    </div>
                    <div v-else-if="fruit == 'monthly_transaction_number'">
                      <el-tooltip placement="top-start" :content="scope.row.deal.order_total_num + ''">
                        <div class="one_line_hidden">
                          {{scope.row.deal.order_total_num}}
                        </div>
                      </el-tooltip>
                    </div>
                    <div v-else-if="fruit == 'monthly_excuse_number'">
                      <el-tooltip placement="top-start" :content="scope.row.refund.refund_total_num + ''">
                        <div class="one_line_hidden">
                          {{scope.row.refund.refund_total_num}}
                        </div>
                      </el-tooltip>
                    </div>
                    <div v-else-if="fruit == 'monthly_sales_money'">
                      <el-tooltip placement="top-start" :content="scope.row.deal.price_total_num + ''">
                        <div class="one_line_hidden">
                          {{scope.row.deal.price_total_num}}
                        </div>
                      </el-tooltip>
                    </div>
                    <div v-else-if="fruit == 'monthl_ysales_money_actual'">
                      <el-tooltip placement="top-start" :content="scope.row.deal.price_total_num + ''">
                        <div class="one_line_hidden">
                          {{scope.row.deal.price_total_num}}
                        </div>
                      </el-tooltip>
                    </div>
                    <div v-else>
                      <el-tooltip placement="top-start" :content="scope.row[fruit] + ''">
                        <div class="one_line_hidden">
                          {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                        </div>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column align="center" fixed="right" width="180" prop="address" label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click="managerdetails(scope.row,'detail')">
                      详情
                    </el-button>
                    <el-button  type="text" @click="addManager(scope.row)">
                      编辑
                    </el-button>
                     <el-button style="margin-right: 5px;" type="text" size="small" @click="group_adjustment(scope.row)">
                      调级
                    </el-button>
                    <el-button style="margin-right: 5px;"  type="text" @click="managerdetails(scope.row,'managerdetail')">运营数据</el-button>
                    <el-popconfirm title="确定删除该经理列表吗？" @confirm="delmansger(scope.row)">
                      <el-button type="text" slot="reference">
                        删除
                      </el-button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table></el-col>
          </el-row>
          <el-row style="text-align: right">
            <pagination v-show="total > 0" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.count"
              @pagination="getList" />
          </el-row>
        </div>
      </div>
      <el-dialog title="添加岗位级别" :visible.sync="dialogClass" width="600px" :before-close="CloseDialogLabel">
        <el-row :gutter="20">
          <el-form :model="ruleFormClass" status-icon :rules="rulesClass" ref="rulesClass" label-width="100px"
            class="demo-ruleForm">
            <el-col :span="22">
              <el-form-item label-width="120px" label="岗位名称" prop="name">
                <el-input type="text" v-model="ruleFormClass.name" maxlength="10" clearable show-word-limit
                   placeholder="请输入岗位名称"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label-width="120px" label="岗位级别等级" prop="name">
                <el-select v-model="ruleFormClass.leve" placeholder="请选择">
                  <el-option label="一级" :value="1" ></el-option>
                  <el-option label="二级" :value="2" ></el-option>
                  <el-option label="三级" :value="3" ></el-option>
                  <el-option label="四级" :value="4" ></el-option>
                  <el-option label="五级" :value="5" ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="CloseDialogLabel">取 消</el-button>
          <el-button type="primary" :loading="butloading" @click="submitFormClass('rulesClass')">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 添加经理抽屉 -->
      <addmanager ref="addmanager" v-if="ifShowaddmanager" :detailTitle="detailTitle"
        :managerformdata="managerformdata" />
      <!-- 配置考核指标 -->
      <allocation ref="allocation" v-if="ifShowAllocation" :detailTitle="detailTitle"
        :allocation_type="allocation_type" />
        <!-- 发放考核达标奖 -->
        <grantincentives ref="showgrant" />
      <!-- 发放优秀奖励 --> 
        <granttalented ref="reftalented" />
        <!-- 基本工资配置 -->
        <basicsalary ref="refbasicsalary" />


      <!-- 详情 -->
      <agerdetails ref="refdetails" />
      <!--岗位列表 -->
      <rolelists ref="refrolelists" />
      <!-- 调级 -->
      <el-dialog title="调配岗位级别" :visible.sync="dialogClasslevel" width="600px" :before-close="CloseDialoglevel">
        <el-row :gutter="20">
          <el-form :model="ruleFormlevel" status-icon :rules="ruleslevel" ref="ruleslevel" label-width="100px"
            class="demo-ruleForm">
            <el-col :span="22">
              <el-form-item label="当前岗位">
                {{current_role_name}}
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="调整到级别" prop="market_role_id">
                <el-select clearable v-model="ruleFormlevel.market_role_id" placeholder="请选择级别">
                  <el-option v-for="item in SupplierList" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="调级原因" prop="remark">
                <el-input type="textarea" maxlength="200" clearable show-word-limit :autosize="{ minRows: 3, maxRows: 5 }"
                  placeholder="备注说明" v-model="ruleFormlevel.remark">
                </el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="CloseDialoglevel">取 消</el-button>
          <el-button type="primary" :loading="leveloading" @click="submitFormlevel()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
    import {
      managerlist,
      managerdelete,
      addtagCategory,
      rolelist,
      setRolelove
    } from "@/api/manager/index";
    import addmanager from "./components/addmanager";
    import grantincentives from "./components/grantincentives.vue";
    import granttalented from "./components/granttalented.vue";

    import allocation from "./components/allocation";
    import agerdetails from "./components/details.vue";
    import rolelists from "./components/rolelists.vue";
    import basicsalary from "./components/basicsalary.vue";

  
    const tableTheadOption = {
      id: {
        label: "运营ID",
        field: "id",
      },
      region: {
        label: "负责区域",
        field: "region",
      },
      name: {
        label: "用户名称",
        field: "name",
      },
      market_role_name: {
        label: "岗位级别",
        field: "market_role_name",
      },
      member_num: {
        label: "团队人数",
        field: "member_num",
      },
      created_at: {
        label: "建团时间",
        field: "created_at",
      },
      monthly_transaction_number: {
        label: "月成交订单数",
        field: "monthly_transaction_number",
      },
      monthly_excuse_number: {
        label: "月退单数",
        field: "monthly_excuse_number",
      },
      monthly_sales_money: {
        label: "月销售额",
        field: "monthly_sales_money",
      },
      monthl_ysales_money_actual: {
        label: "月实际成交额",
        field: "monthl_ysales_money_actual",
      },
      role_time: {
        label: "最近调级时间",
        field: "role_time",
      },
    };
    const allTableThead = [
      "id",
      "region",
      "name",
      "market_role_name",
      "member_num",
      "created_at",
      "monthly_transaction_number",
      "monthly_excuse_number",
      "monthly_sales_money",
      "monthl_ysales_money_actual",
      "role_time",
    ];
    const defaultTableThead = [
      "id",
      "region",
      "name",
      "market_role_name",
      "member_num",
      "created_at",
      "monthly_transaction_number",
      "monthly_excuse_number",
      "monthly_sales_money",
      "monthl_ysales_money_actual",
      "role_time",
    ];
    export default {
      watch: {
        checkboxTableThead(valArr) {
          this.tableThead = this.allTableThead.filter(
            (i) => valArr.indexOf(i) >= 0
          );
          this.tableKey = this.tableKey + 1;
          this.$nextTick(() => {
            this.$refs.tablerefs.doLayout();
          });
        },
      },
      components: {
        addmanager,
        allocation,
        agerdetails,
        rolelists,
        grantincentives,
        granttalented,
        basicsalary
      },
      data() {
        return {
          ruleslevel: {
            level: [{
              required: true,
              validator: (rule, value, callback) => {
                if (!value) {
                  return callback(new Error("请选择级别"));
                }
                callback();
              },
              trigger: "change",
            }, ],
          },
          ruleFormlevel: {//调整级别
            market_role_id: '',
            remark: '',
          }, 
          current_role_name:'',
          leveloading:false,
          dialogClasslevel:false,
          butloading:false,
          ruleFormClass: {
            name: "",
            leve: "",
          },
          rulesClass: {
            name: [{
              required: true,
              validator: (rule, value, callback) => {
                if (!value) {
                  return callback(new Error("岗位名称不能为空"));
                }
                callback();
              },
              trigger: "blur",
            }, ],
          },
          dialogClass: false, //添加校色
          managerformdata: '', //编辑运营经理数据
          allocation_type: '', //配置类型
          loading: false, //加载
          detailTitle: "", //抽屉标题
          ifShowaddmanager: false, //添加运营经理
          ifShowAllocation: false,
          establishTime: [],//建团时间段
          operatingtime:[],//运营数据时间
          managerList: [], //列表数据
          SupplierList: [],
          reduce: 0,
          // 默认表头
          tableTheadOptions: tableTheadOption, //所有表头
          allTableThead: allTableThead,
          tableThead: defaultTableThead, // 默认表头
          checkboxTableThead: defaultTableThead, // 默认表头值
          tableKey: 1, // 为了保证table 每次都会重渲
          searchDisplay: false,
          roleForm: {
            params: {
              name: '',
              phone: '',
            },
            page: 1,
            count: 10,
          },
          searchForm: {
            params: {
              market_role_id: "", // 运营id
              name: '',
              mobile: '',
              create_time_start: '',
              create_time_end: '',
              market_time_start:'',
              market_time_end:'',
              user_id: ''
            },
            page: 1,
            count: 10,
          },
          total: 0,
        };
      },
      created() {
        this.getList(); //运营经理列表
        this.getroleList()
      },
      methods: {
        // 发放考核达标奖
        butgrantincentives(){
          this.$refs.showgrant.open();
        },
        butgranttalented(){
          this.$refs.reftalented.open();
        },
  
        //校色列表
        rolelist(){
          this.$refs.refrolelists.open()
        },
        //添加岗位
        addrole() {
          this.dialogClass = true;
        },
        //添加岗位
        submitFormClass(formName) {
          var _this = this;
          _this.$refs[formName].validate((valid) => {
            if (valid) {
              _this.butloading = true
              addtagCategory(_this.ruleFormClass).then((res) => {
                if (res.code !== 200) {
                  _this.$messages.error(res.msg);
                  _this.butloading = false
                  return;
                }
                _this.$messages.success("操作成功");
                _this.dialogClass = false;
                _this.butloading = false
                this.ruleFormClass.name = ''
              });
            } else {
              return false;
            }
          });
        },
        // 关闭弹框
        CloseDialogLabel() {
          this.dialogClass = false;
          this.ruleFormClass.name = ''
        },
        // 新增经理
        addManager(row) {
          if (row) { //编辑
            this.detailTitle = "编辑运营经理"
            this.ifShowaddmanager = true
            this.managerformdata = row
          } else {
            this.detailTitle = "新增运营经理"
            this.ifShowaddmanager = true
          }
        },
        //调级
        group_adjustment(row) {
          this.current_role_name = row.market_role_name
          this.ruleFormlevel.market_manager_id = row.id
          this.dialogClasslevel = true
        },
         //调级提交
         submitFormlevel() {
          this.$refs.ruleslevel.validate((valid) => {
            if (valid) {
              console.log(this.ruleFormlevel)
              this.leveloading = true
              setRolelove(this.ruleFormlevel).then((res)=>{
                if(res.code==200){
                  this.dialogClasslevel = false
                  this.$messages.success("操作成功");
                  this.leveloading = false
                  this.getList();
                }
              })
  
            } else {
              return false;
            }
          });
        },
        CloseDialoglevel() {
          this.dialogClasslevel = false;
        },
        //详情
        managerdetails(row,type) {
          this.$refs.refdetails.open(row.id,type)
        },
        // 运营数据
        operationaldata(row) {

        },
        //配置考核指标
        editallocation(title, type) {
            this.detailTitle = title
            this.allocation_type = type
            this.ifShowAllocation = true
        },
        editbasicsalary(){
          this.$refs.refbasicsalary.open()
        },
  
        //删除
        delmansger(row) {
          managerdelete({
            id: row.id
          }).then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.$messages.error(res.msg);
              return;
            }
            this.$messages.success(res.msg);
            this.getList()
          });
        },
        // 获岗位列表
        getroleList() {
          rolelist(this.roleForm).then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.$messages.error(res.msg);
              return;
            }
            this.SupplierList = res.data.list;
          });
        },
        // 获取列表
        getList() {
          this.loading = true
          managerlist(this.searchForm).then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.$messages.error(res.msg);
              this.loading = false
              return;
            }
            this.managerList = res.data.list;
            this.total = res.data.total
            this.loading = false
          });
  
        },
        //关闭添加经理抽屉
        closedetails() {
          this.ifShowaddmanager = false;
          this.managerformdata = {}
          this.getList()
        },
        //关闭添加经理抽屉
        closedetail() {
          this.ifShowaddmanager = false;
          this.managerformdata = {}
        },
        //关闭配置抽屉
        closeallocation() {
          this.ifShowAllocation = false
          this.getList();
        },
        //重置
        resetting() {
          this.searchForm.page = 1
          this.searchForm.count = 10
          this.searchForm.params.market_role_id = '';
          this.searchForm.params.name = '';
          this.searchForm.params.mobile = '';
          this.searchForm.params.user_id = '';
          this.searchForm.params.create_time_start = '';
          this.searchForm.params.create_time_end = '';
          this.searchForm.params.market_time_start = '';
          this.searchForm.params.market_time_end = '';
          this.establishTime = []
          this.operatingtime = []
          this.getList()
        },
        //建团时间
        domeTimeWay(val) {
          if (val.length !== 0) {
            this.searchForm.params.create_time_start = val[0];
            this.searchForm.params.create_time_end = val[1];
          } else {
            this.searchForm.params.create_time_start = "";
            this.searchForm.params.create_time_end = "";
          }
        },
        //运营时间
        operchangetime(val) {
            if (val.length !== 0) {
            this.searchForm.params.market_time_start = val[0];
            this.searchForm.params.market_time_end = val[1];
          } else {
            this.searchForm.params.market_time_start = "";
            this.searchForm.params.market_time_end = "";
          }
        }
      },
    };
  </script>
  
  <style>
  </style>
  